<template>
  <a-modal title="快递查询" :visible="visible" @ok="handleOk" @cancel="handleCancel">
    <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
      <a-form-item label="物流单号">
        <a-input disabled :default-value="logisticsNo"></a-input>
      </a-form-item>
      <a-form-item label="手机后四位" help="收件人或寄件人手机尾号4位，顺丰快递和丰网物流 必填此项，其他快递可留空">
        <a-input v-decorator="['phoneLastFour', validatorRules.phonelastfour]" />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
        <a-button type="primary" @click="handleSubmit"> 点击查看 </a-button>
      </a-form-item>
    </a-form>
    <!-- <a-table :columns="columns" :dataSource="data" >
      <template slot="status" slot-scope="text">
        <a-tag :color="text | statusFilter">
          {{ text | statusTextFilter }}
        </a-tag>
      </template>
    </a-table> -->
    <div style="text-align: center">
      <a-spin v-if="loading" tip="加载中..." :spinning="loading" />
    </div>
    <a-timeline mode="alternate">
      <a-timeline-item v-for="item in data" :key="item.time">
        <a-icon slot="dot" type="clock-circle-o" style="font-size: 16px" />
        <a-tag>{{ item.time }}</a-tag>
        ，{{ item.msg }}</a-timeline-item
      >
    </a-timeline>
  </a-modal>
</template>

<script>
import { getlogistics } from '@/api/api'

export default {
  data() {
    return {
      visible: false,
      form: this.$form.createForm(this),
      logisticsNo: '',
      validatorRules: {
        phonelastfour: {
          rules: [{ min: 0, max: 4, message: '长度不超过 4 个字符', trigger: 'blur' }],
        },
      },
      columns: [
        {
          title: '时间',
          dataIndex: 'time',
          width: '20%',
        },
        {
          title: '描述',
          dataIndex: 'msg',
          width: '80%',
        },
      ],
      data: [],
      loading: false,
    }
  },
  methods: {
    show(no) {
      this.data = ''
      this.logisticsNo = no
      this.visible = true
    },
    handleOk(e) {
      this.visible = false
    },
    handleCancel(e) {
      this.visible = false
    },
    handleSubmit() {
      this.data = ''
      this.loading = true
      this.form.validateFields((err, values) => {
        if (!err) {
          getlogistics({ logisticsNo: this.logisticsNo, phoneLastFour: values.phoneLastFour }).then((res) => {
            console.log(res.data)
            if (res.code === 200) {
              this.data = res.data
            } else {
              this.$message.warning(res.msg)
            }
            this.loading = false
          })
        }
      })
    },
  },
}
</script>

<style>
</style>